import { defineStore } from 'pinia'
import TheLayout from '../../layout/TheLayout.vue'
import TheCenter from '../../layout/center/TheCenter.vue'
import { type Router, type RouteRecordRaw } from 'vue-router'
import { MenuApi } from '../../api/menu'
const vueComponentList = import.meta.glob('../../views/**/*.vue') // 获取views目录下全部的vue组件

export const useMenuStore = defineStore('useMenuStore', {
    state: () => {
        return {
            collapse: false,
            menuList: [
                {
                    path: '/dashboard',
                    component: 'TheLayout',
                    name: 'dashboard',
                    meta: {
                        title: '首页',
                        icon: 'HomeFilled',
                        roles: ['sys:dashboard']
                    }
                }
            ]
        }
    },
    getters: {
        getCollapse(state) {
            return state.collapse
        },
        getMenuList(state) {
            return state.menuList
        }
    },
    actions: {
        setCollapse(collapse: boolean) {
            this.collapse = collapse
        },
        /**
         * 
         * @param router 用于把从后端获取到的【菜单列表】设置为动态路由
         * @param userId  用于查询【菜单列表】
         */
        querySetVueRouterMenuTree(router: Router, userId: string | number) {
            return new Promise((resolve, reject) => {
                MenuApi.listVueRouterTree(userId).then(res => {
                    let dynamicRoutes = []
                    if (res && res.code === 200) {
                        dynamicRoutes = generateRoutes(res.data, router) as []
                        this.menuList = this.menuList.concat(dynamicRoutes)
                    }
                    resolve(this.menuList)
                }).catch(err => {
                    reject(err)
                })
            })
        }
    }
})

// export function generateRoutes(routes: RouteRecordRaw[], router: any) {
//     //路由数据
//     const res: Array<RouteRecordRaw> = [];
//     routes.forEach((route: any) => {
//         const tmp = { ...route }
//         const component = tmp.component;
//         //生成路由的component
//         if (route.component) {
//             if (component == 'TheLayout') {
//                 tmp.component = TheLayout;
//             } else {
//                 tmp.component = vueComponentList[`../../${component}`]
//             }
//         }
//         //有下级:
//         if (tmp.children && tmp.children.length > 0) {
//             if (route.component != 'TheLayout') {
//                 tmp.children = TheCenter;
//             }
//             //递归：生成下级
//             tmp.children = generateRoutes(tmp.children, router);
//         }
//         res.push(tmp)
//         //加入路由
//         router.addRoute(tmp)
//     })
//     return res;
// }

export const generateRoutes = (treeVueRouterVOList: [], router: Router) => {
    const res: Array<RouteRecordRaw> = [];

    treeVueRouterVOList.forEach((routerVO: any) => {
        const cloneRouterVO = { ...routerVO }
        const component = cloneRouterVO.component
        if (routerVO.component) {
            if (component === 'TheLayout') {
                cloneRouterVO.component = TheLayout
            } else {
                cloneRouterVO.component = vueComponentList[`../../${cloneRouterVO.component}`]
            }
        }

        if (cloneRouterVO.children && cloneRouterVO.children.length > 0) {
            if (routerVO.component !== 'TheLayout') {
                cloneRouterVO.children = TheCenter
            }
            cloneRouterVO.children = generateRoutes(cloneRouterVO.children, router)
        }

        res.push(cloneRouterVO)
        router.addRoute(cloneRouterVO)
    })
    return res
}